{% if imglist %}
<script type="text/javascript" src="/static/js/jquery-1.10.2.js"></script>	

<style>
    #album {width:600px;}
    #album img {width: 510px; float:left; height:320px;background-color: #eee;}
    #album .nav {width: 80px; float:right; opacity: 0.6; background: #fff;}
    #album .nav a { display:block; margin-bottom:5px; height:60px; width: 60px; 
        background-color:#eee; border:1px solid #aaa;}
    #album .nav img {height: 60px; width: 60px;}
</style>
<div id="album">
    <img id="bigImg" src="images/sample01.jpg" />
    <div class="nav">
        <a id="nav0" index="0" href="#"></a>
        <a id="nav1" index="1" href="#"></a>
        <a id="nav2" index="2" href="#"></a>
        <a id="nav3" index="3" href="#"></a>
        <a id="nav4" index="4" href="#"></a>
    </div>
    <br style="clear:both;" />
</div>

<script>
    var imglist = [];
    {% for img in imglist %}
    imglist.push({"imgurl":"/static/{{img.path}}"});
    {% endfor %}
    $(document).ready(function(){
        $("#bigImg").attr("src", imglist[0].imgurl);
        for(var i=0; i<imglist.length; i++){ $("#nav" + i).html("<img src='" + imglist[i].imgurl +"' />"); }
        $("#album .nav a").mouseover(function(){
            for(var j=0;j<imglist.length; j++){ $("#nav" + j).css({"opacity":0.6}); }
            $(this).css({"opacity":1});
            var i = parseInt($(this).attr("index")) ;
            if (i < imglist.length){
                $("#bigImg").attr("src", imglist[i].imgurl);
            }
        })	
    })
</script>
{% endif %}
